<template>
  <div>
    <div class="analysisGeneration-content1">
      <el-form :model="generateApiData" ref="analysisGeneration-content1-generateApiData" class="analysisGeneration-content1-form">
        <el-form-item label="注释前缀" prop="notes" class="s" :rules="[{ required: true, message: '请输入注释前缀', trigger: 'blur' }]">
          <el-input placeholder="请输入注释前缀如table" v-model="generateApiData.notes" clearable/>
        </el-form-item>
        <el-form-item label="方法名前缀" prop="methodName" class="s" :rules="[{ required: true, message: '请输入方法名前缀', trigger: 'blur' }]">
          <el-input placeholder="方法名前缀如navigation1" v-model="generateApiData.methodName" clearable/>
        </el-form-item>
        <el-form-item label="表名" prop="tableName" class="s" :rules="[{ required: true, message: '请输入表名', trigger: 'blur' }]">
          <el-input placeholder="请输入表名" v-model="generateApiData.tableName" clearable/>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="generateApi" class="ml-12">生成api</el-button>
      <el-button type="warning" @click="dataValidationClick" class="ml-12">api数据验证</el-button>
    </div>
    <!--手动添加的接口-->
    <div class="analysisGeneration-title">
      <span></span>
      <label>手动添加接口</label>
      <div class="s"></div>
      <template>
        <div class="n" @click="apiAddClick">
          <i class="el-icon-edit"></i>
          新增接口
        </div>
      </template>
    </div>
    <div class="analysisGeneration-design-api-content">
      <el-table ref="table" :data="propsData.apiProp.apiArray2" border style="width: 100%" :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}">
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="api注释" min-width="150" :show-overflow-tooltip="true" align="center" prop="notes"/>
        <el-table-column label="api方法名" min-width="150" :show-overflow-tooltip="true" align="center" prop="name"/>
        <el-table-column label="请求地址" min-width="150" :show-overflow-tooltip="true" align="center" prop="path"/>
        <el-table-column label="请求方式" min-width="150" :show-overflow-tooltip="true" align="center" prop="mode"/>
        <el-table-column label="参数方式" min-width="150" :show-overflow-tooltip="true" align="center" prop="paramsMode"/>
        <!--<el-table-column label="参数" min-width="150" :show-overflow-tooltip="true" align="center" prop="params"/>-->
        <el-table-column label="操作" width="190" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="apiEditClick(scope.row,scope.$index)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="apiDelClick(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--自动生成的接口-->
    <div class="analysisGeneration-title">
      <span></span>
      <label> 自动生成的接口</label>
      <div class="s"></div>
    </div>
    <div class="analysisGeneration-design-api-content">
      <el-table ref="table" :data="propsData.apiProp.apiArray" border style="width: 100%" :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}">
        <el-table-column label="序号" width="50" align="center" fixed="left">
          <template slot-scope="scope">
            {{propsData.apiProp.apiArray2.length+scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column label="api注释" min-width="150" :show-overflow-tooltip="true" align="center" prop="notes"/>
        <el-table-column label="api方法名" min-width="150" :show-overflow-tooltip="true" align="center" prop="name"/>
        <el-table-column label="请求地址" min-width="150" :show-overflow-tooltip="true" align="center" prop="path"/>
        <el-table-column label="请求方式" min-width="150" :show-overflow-tooltip="true" align="center" prop="mode"/>
        <el-table-column label="参数方式" min-width="150" :show-overflow-tooltip="true" align="center" prop="paramsMode"/>
        <el-table-column label="操作" width="190" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="apiEditClick2(scope.row,scope.$index)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="apiDelClick2(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--新增api-->
    <el-dialog
        :append-to-body="true"
        :show-close="true"
        :title="dialogData.title"
        :visible.sync="dialogData.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="dialogDataClose"
        width="600px"
    >
      <el-form :model="dialogData.formData" ref="api-form" class="analysisGeneration-form-dialog">
        <el-form-item label="api注释" prop="notes" class="s" :rules="[{ required: true, message: '请输入api注释', trigger: 'blur' }]">
          <el-input v-model="dialogData.formData.notes" placeholder="请输入api注释" clearable></el-input>
        </el-form-item>
        <el-form-item label="api方法名" prop="name" class="s" :rules="[{ required: true, message: '请输入api方法名', trigger: 'blur' }]">
          <el-input v-model="dialogData.formData.name" placeholder="请输入api方法名" clearable></el-input>
        </el-form-item>
        <el-form-item label="请求地址" prop="path" class="s" :rules="[{ required: true, message: '请输入请求地址', trigger: 'blur' }]">
          <el-input v-model="dialogData.formData.path" placeholder="请输入请求地址" clearable></el-input>
        </el-form-item>
        <el-form-item label="请求方式" prop="mode" class="s" :rules="[{ required: true, message: '请选择请求方式', trigger: 'blur' }]">
          <el-select v-model="dialogData.formData.mode" placeholder="请选择请求方式" clearable>
            <el-option
                v-for="item in $store.state.requestMethodOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数方式" prop="paramsMode" class="s" :rules="[{ required: true, message: '请选择参数方式', trigger: 'blur' }]">
          <el-select v-model="dialogData.formData.paramsMode" placeholder="请选择参数方式" clearable>
            <el-option
                v-for="item in $store.state.paramsModeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDataClose">取 消</el-button>
        <el-button type="primary" @click="dialogDataSub">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['propsData'],
  data() {
    return {
      //生成api
      generateApiData: {
        notes: '',//注释前面如table
        methodName: '',//方法名前缀
        tableName: '',//表名
      },

      //新增/编辑dialog
      dialogData: {
        title: '新增接口',
        isDialog: false,
        arrayName:'',
        formData: {
          id: '',
          notes: '',//api注释
          name: '',//api方法名
          path: '',//请求地址
          mode: 'post',//请求方式
          paramsMode: 'data',//参数方式
        }
      }
    };
  },
  mounted() {
  },
  methods: {
    //api 数据验证
    dataValidationClick() {
      let arrayData = this.propsData.apiProp.apiArray2.concat(this.propsData.apiProp.apiArray);
      for (let i = 0; i < arrayData.length; i++) {
        if (arrayData[i].path.substring(0,1)!='/') {
          this.$message.error(`${i + 1}---api请求地址要以/开头`);
          return false
        }
        let num=0
        let num1=0
        for (let j = 0; j < arrayData.length; j++) {
          if(arrayData[i].notes==arrayData[j].notes){
            num=num+1;
          }
          if(arrayData[i].name==arrayData[j].name){
            num1=num1+1;
          }
        }
        if(num>1){
          this.$message.error(`${i + 1}---api注释重复`);
          return false
        }
        if(num1>1){
          this.$message.error(`${i + 1}---api方法名重复`);
          return false
        }
      }
      this.$message.success(`api暂无错误`);
    },


    //生成api
    generateApi() {
      this.$refs['analysisGeneration-content1-generateApiData'].validate((valid) => {
        if (valid) {
          //table分页列表
          let JsonData1 = {
            notes: `${this.generateApiData.notes} 分页列表`,//api注释
            name: `${this.generateApiData.methodName}List`,//api 方法名
            path: `/${this.generateApiData.tableName}/list.do`,//请求地址
            mode: 'post',//请求方式
            paramsMode: 'params',//参数方式
          }
          this.propsData.apiProp.apiArray2.push(JsonData1);
          //table 新增/修改
          let JsonData2 = {
            notes: `${this.generateApiData.notes} 新增/修改`,//api注释
            name: `${this.generateApiData.methodName}AddEdit`,//api 方法名
            path: `/${this.generateApiData.tableName}/save.do`,//请求地址
            mode: 'post',//请求方式
            paramsMode: 'data',//参数方式
          }
          this.propsData.apiProp.apiArray2.push(JsonData2);
          //table 删除
          let JsonData3 = {
            notes: `${this.generateApiData.notes} 删除`,//api注释
            name: `${this.generateApiData.methodName}Del`,//api 方法名
            path: `/${this.generateApiData.tableName}/delete.do`,//请求地址
            mode: 'post',//请求方式
            paramsMode: 'params',//参数方式
          }
          this.propsData.apiProp.apiArray2.push(JsonData3);
          //table 单条数据查询
          let JsonData4 = {
            notes: `${this.generateApiData.notes} 单条数据查询`,//api注释
            name: `${this.generateApiData.methodName}Query`,//api 方法名
            path: `/${this.generateApiData.tableName}/get${this.Utils.englishInitialCapital(this.propsData.tableName)}.do`,//请求地址
            mode: 'post',//请求方式
            paramsMode: 'params',//参数方式
          }
          this.propsData.apiProp.apiArray2.push(JsonData4);
          //table 不分页列表
          let JsonData5 = {
            notes: `${this.generateApiData.notes} 不分页列表`,//api注释
            name: `${this.generateApiData.methodName}All`,//api 方法名
            path: `/${this.generateApiData.tableName}/all.do`,//请求地址
            mode: 'post',//请求方式
            paramsMode: 'params',//参数方式
          }
          this.propsData.apiProp.apiArray2.push(JsonData5);
          //table 批量删除
          let JsonData6 = {
            notes: `${this.generateApiData.notes} 批量删除`,//api注释
            name: `${this.generateApiData.methodName}BatchDel`,//api 方法名
            path: `/${this.generateApiData.tableName}/patchDelete.do`,//请求地址
            mode: 'post',//请求方式
            paramsMode: 'params',//参数方式
          }
          this.propsData.apiProp.apiArray2.push(JsonData6);
          //table 多条数据同时保存
          let JsonData7 = {
            notes: `${this.generateApiData.notes} 多条数据同时保存`,//api注释
            name: `${this.generateApiData.methodName}PatchSave`,//api 方法名
            path: `/${this.generateApiData.tableName}/patchSave.do`,//请求地址
            mode: 'post',//请求方式
            paramsMode: 'data',//参数方式
          }
          this.propsData.apiProp.apiArray2.push(JsonData7);

          this.$message.success('生成api成功')
        }
      });
    },
    //新增接口
    apiAddClick() {
      this.dialogData.title = '新增接口';
      this.dialogData.formData.name = this.propsData.fileName;
      this.dialogData.arrayName='apiArray2'
      this.dialogData.formData.path = `/${this.propsData.fileName}/`;
      this.dialogData.isDialog = true;
    },
    //编辑
    apiEditClick2(row, key) {
      this.dialogData.title = '编辑接口';
      let jsonData = JSON.parse(JSON.stringify(row))
      this.dialogData.formData = jsonData;
      this.dialogData.formData.id = key;
      this.dialogData.arrayName='apiArray'
      this.dialogData.isDialog = true;
    },
    //删除
    apiDelClick2(key) {
      this.propsData.apiProp.apiArray.splice(key, 1)
    },
    //编辑
    apiEditClick(row, key) {
      this.dialogData.title = '编辑接口';
      let jsonData = JSON.parse(JSON.stringify(row))
      this.dialogData.arrayName='apiArray2'
      this.dialogData.formData = jsonData;
      this.dialogData.formData.id = key;
      this.dialogData.isDialog = true;
    },
    //删除
    apiDelClick(key) {
      this.propsData.apiProp.apiArray2.splice(key, 1)
    },
    //确定
    dialogDataSub() {
      this.$refs['api-form'].validate((valid) => {
        if (valid) {
          if(this.dialogData.arrayName!='apiArray'){
            for (let i = 0; i < this.propsData.apiProp.apiArray.length; i++) {
              if (this.propsData.apiProp.apiArray[i].name == this.dialogData.formData.name) {
                this.$message.error(`自动生成的接口方法名重复`);
                return false
              }
              if (this.propsData.apiProp.apiArray[i].notes == this.dialogData.formData.notes) {
                this.$message.error(`自动生成的api注释重复`);
                return false
              }
            }
          }
          if (this.dialogData.formData.id !== '') {
            //改
            let apiArray2 = JSON.parse(JSON.stringify(this.propsData.apiProp[this.dialogData.arrayName]));
            apiArray2.splice(this.dialogData.formData.id, 1); //先删了
            let num = 0;
            for (let i = 0; i < apiArray2.length; i++) {
              if (apiArray2[i].name == this.dialogData.formData.name) {
                num = num + 1
              }
              if (apiArray2[i].notes == this.dialogData.formData.notes) {
                num = num + 1
              }
            }
            if (num > 0) {
              this.$message.error('改-接口方法名或注释重复');
              return false
            } else {
              this.propsData.apiProp[this.dialogData.arrayName][this.dialogData.formData.id] = this.dialogData.formData;
              this.$store.state.randomKey = this.Utils.createRandomKey();
            }
          } else {
            //增
            for (let i = 0; i < this.propsData.apiProp[this.dialogData.arrayName].length; i++) {
              if (this.propsData.apiProp.apiArray2[i].name == this.dialogData.formData.name) {
                this.$message.error(`增-接口方法名重复`);
                return false
              }
              if (this.propsData.apiProp.apiArray2[i].notes == this.dialogData.formData.notes) {
                this.$message.error(`增-接口api注释重复`);
                return false
              }
            }
            this.propsData.apiProp[this.dialogData.arrayName].push(this.dialogData.formData);
          }

          this.dialogDataClose();
        }
      })
    },
    //取消
    dialogDataClose() {
      this.dialogData = this.$options.data().dialogData;
    },
  },
};
</script>

<style lang="scss" scoped></style>
